<!--
 * @Description: 
 * @Date: 2024-05-16 15:04:25
 * @LastEditTime: 2024-08-24 18:29:42
-->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '在线留言',
    navigationBarTextStyle: 'white', //标题栏字体颜色
    navigationBarBackgroundColor: '#0063AF', //标题栏背景色(纯色)
  },
}
</route>

<template>
  <view class="leaveMessage w-screen h-screen box-border bg-#F4F5F9">
    <image class="w-screen h-250rpx" :src="banner" mode="scaleToFill" />
    <view class="w-90% mx-auto translate-y--8% p-40rpx box-border rounded-20rpx bg-#fff">
      <wd-form ref="form" :model="model" :rules="rules">
        <wd-input
          type="text"
          v-model="model.name"
          placeholder="请输入姓名"
          prop="name"
          @change="handleChange"
        />
        <wd-input
          type="text"
          v-model="model.phone"
          prop="phone"
          placeholder="请输入您的手机号"
          @change="handleChange"
        />
        <wd-textarea v-model="model.conent" prop="conent" placeholder="请填写您的留言" />
      </wd-form>
    </view>
    <wd-button
      class="bg-#0A4484 mx-20rpx"
      :round="false"
      type="primary"
      size="large"
      @click="handleSubmit"
      block
    >
      提交
    </wd-button>
  </view>
</template>
<script lang="ts" setup>
import banner from '../../../static/images/banner.jpg'
import { FormRules } from 'wot-design-uni/components/w-d-form/src/types'
import { postOnlineAPI } from '@/service/index/foo'
import { useToast } from 'wot-design-uni'
import { useUserStore } from '@/store'
const userStore = useUserStore()
const model = reactive<{
  name: string
  phone: string
  conent: string
}>({
  name: '',
  phone: '',
  conent: '',
})
const form = ref()
const rules: FormRules = {
  name: [
    {
      required: true,
      message: '请输入姓名',
      validator: (value) => {
        if (value) {
          return Promise.resolve()
        } else {
          return Promise.reject('请输入姓名')
        }
      },
    },
  ],
  phone: [
    {
      required: true,
      message: '请输入手机号',
      validator: (value) => {
        if (value) {
          return Promise.resolve()
        } else {
          return Promise.reject('请输入手机号')
        }
      },
    },
  ],
  conent: [
    {
      required: true,
      message: '请输入内容',
      validator: (value) => {
        if (value) {
          return Promise.resolve()
        } else {
          return Promise.reject('请输入内容')
        }
      },
    },
  ],
}
const value = ref()
const toast = useToast()

function handleChange() {}
function handleSubmit() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {
        try {
          postOnlineAPI({
            ...model,
            openId: userStore.userInfo.openid,
            // roleId: userStore.userInfo.zhuanId,
          }).then((res) => {
            toast.success({
              msg: '操作成功',
              duration: 0,
            })
            setTimeout(() => {
              uni.switchTab({
                url: '/pages/home/index',
              })
              toast.close()
            }, 1500)
          })
        } catch (error) {
          console.log(error)
        }
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}
</script>
<style lang="scss" scoped>
::v-deep .wd-input,
::v-deep .wd-textarea {
  padding-left: 10rpx;
  margin-bottom: 40rpx;
  border: 2rpx solid #c1c1c1;
  border-radius: 20rpx;
}

::v-deep .wd-button {
  width: 70% !important;
}

::v-deep .wd-input::after {
  height: 0 !important;
}
</style>
